<script setup lang="ts">
// 获取天气请求的函数
import { getWeather } from '../../api/index'
// 导入组件
import IndexTitle from './IndexTitle.vue';
import { ref } from 'vue'
// 定义接口
interface typeWeather{
  [key:string]:any
}
// 定义天气数据
const weather = ref<typeWeather>({})
// 今天天气情况路径
const todayImg = ref('')
// 定义明天的天气情况
const  tomorrowWea=ref<typeWeather>({})
// 定义明天天气情况路径
const tomorrowImg=ref('')
// 获取天气数据
getWeather('v61').then((resp) => {
  console.log(resp, '获取天气')
  weather.value = resp.data
  switch (resp.data.wea_img) {
    case 'yu':
      todayImg.value = '/src/assets/yu.png'
      break
    case 'yin':
      todayImg.value = '/src/assets/yin.png'
      break
    case 'xue':
      todayImg.value = '/src/assets/xue.png'
      break
    case 'qing':
      todayImg.value = '/src/assets/qing.png'
      break
  }
})
// 获取明天的数据
getWeather('v9').then((resp) => {
  console.log(resp, '获取天气')
  tomorrowWea.value = resp.data.data[1]
  switch (resp.data.data[1].wea_img) {
    case 'yu':
      tomorrowImg.value = '/src/assets/yu.png'
      break
    case 'yin':
      tomorrowImg.value = '/src/assets/yin.png'
      break
    case 'xue':
      tomorrowImg.value = '/src/assets/xue.png'
      break
    case 'qing':
      tomorrowImg.value = '/src/assets/qing.png'
      break
  }
})
</script>

<template>
  <div class="box">
    <!-- 标题 -->
   <IndexTitle title="环境监测"></IndexTitle>
    <!-- 具体渲染内容 -->
    <div class="content-box">
      <div class="top">
        <!-- 今天的气温 -->
        <div class="left">{{ weather.tem }}°C</div>
        <!-- 中间的最低温和最高温 -->
        <div class="center">
          <!-- 空气质量 -->
          <div class="air">{{ weather.air }}{{ weather.air_level }}</div>
          <!-- 最低温和最高温 -->
          <div class="tem">{{ weather.tem2 }}°C~{{ weather.tem1 }}°C</div>
        </div>
        <!-- 右边的天气情况 -->
        <div class="right">{{ weather.air_tips?weather.air_tips.slice(0, 4):''}}</div>
      </div>
      <!-- 体感风力湿度 -->
      <div class="tfs">
        <!-- 体感 -->
        <div>
          <img src="../../assets/tiganwendu.png" alt="" />
          <span>体感</span>
          <span>{{ weather.tem }}°C</span>
        </div>
        <!-- 风力 -->
        <div>
          <img src="../../assets/fengli.png" alt="" />
          <span>风力</span>
          <span>{{ weather.win_speed }}</span>
        </div>
        <!-- 湿度 -->
        <div>
          <img src="../../assets/shidu.png" alt="" />
          <span>湿度</span>
          <span>{{ weather.humidity }}</span>
        </div>
      </div>
      <!-- 今天和明天 -->
      <div class="tm">
        <!-- 今天 -->
        <div>
          <!-- 上面的温度 -->
          <div class="temp">
            <span>{{ weather.tem2 }}°C~{{ weather.tem1 }}°C</span>
            <img :src="todayImg" alt="" />
          </div>
          <!-- 空气质量 -->
          <div class="quality">
            <span>今天</span>
            <span>{{ weather.air }}{{ weather.air_level }}</span>
            <span>{{ weather.wea }}</span>
          </div>
        </div>
        <!-- 明天 -->
        <div class="aa">
          <!-- 上面的温度 -->
          <div class="temp">
            <!-- tomorrowWea -->
            <span>{{ tomorrowWea.tem2 }}°C~{{ tomorrowWea.tem1 }}°C</span>
            <img :src="tomorrowImg" alt="" />
          </div>
          <!-- 空气质量 -->
          <div class="quality">
            <span>明天</span>
            <span>{{ tomorrowWea.air }}{{ tomorrowWea.air_level }}</span>
            <span>{{ tomorrowWea.wea }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: 74%;
  height: 40%;
  position: absolute;
  top: 100px;
  left: 50px;

  .content-box {
    background-color: #1b1f60;
    width: 100%;
    margin-top: 10px;
    height: 70%;
    .top {
      display: flex;
      justify-content: space-between;
      color: #dbdbdb;
      align-items: center;
      height: 50px;
      .left {
        margin-left: 10px;
      }
      .center {
        flex: 1;
        margin: 0 20px;
        .air {
          background-color: #07a93c;
          text-align: center;
          display: inline-block;
          border-radius: 4px;
          font-size: 10px;
        }
        .tem {
          font-size: 12px;
        }
      }
      .right {
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .tfs {
      color: #dbdbdb;
      font-size: 12px;
      padding: 0 10px;
      box-sizing: border-box;
      border: 1px solid #293c98;
      > div {
        display: flex;
        height: 60px;
        align-items: center;
        height: 30px;
        border-bottom: 1px solid #293c98;
        
        img {
          margin-left: 10px;
        }
        span:nth-child(2) {
          flex: 1;
        }
        span:last-child {
          margin-right: 10px;
        }
      }
    }
    .tm {
      display: flex;
      justify-content: space-evenly;
      color: #dbdbdb;
      font-size: 12px;
      height: 60px;
      align-items: center;
      background-color: #1b1f60;
      > div {
        width: 50%;
        padding: 0 20px;
        box-sizing: border-box;
        .temp {
          display: flex;
          justify-content: space-between;
          width: 100%;
          span {
            flex: 1;
          }
        }
        .quality {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span:nth-child(2) {
            background-color: #07a93c;
            border-radius: 2px;
            display: inline-block;
            margin-left: 4px;
            font-size: 10px;
          }
          span:last-child {
            flex: 1;
            text-align: right;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>